<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/font/iconfont.css}" media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/layui/css/layui.css}"  media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap-table/bootstrap-table.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/table.css}"  media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/select2/css/select2.css}" media="all"/>
    <style>
        .blocks{
            display: flex;
            flex-direction: column;
            width: 20rem;
            height: 6rem;
        }
        .blockout{
            display: flex;
            justify-content: space-between;
            margin: 1.5rem 0;
            padding: 0 1rem;
        }
        input[type="text"]:disabled{
            background-color: #EEF1F6;
        }
    </style>
</head>
<body>
<div class="layui-fluid larry-wrapper" id="StandardVUE">
    <div class="layui-row layui-col-space30">
        <div class="layui-col-xs24">
            <section class="panel panel-padding layui-card-body" >
                <div class="pro">
                    <table id="table" data-undefined-text=">_<" data-height="400"></table>
                </div>
            </section>
        </div>
    </div>
</div>
<div hidden id="forms">
    <div class="layui-fluid larry-wrapper">
        <div class="layui-row layui-col-space30">
            <div class="layui-col-xs24">
                <section class="panel panel-padding">
                    <div class="layui-collapse" lay-filter="test" style="margin-top: 5rem">
                        <form id="form1" class="layui-form layui-form-pane" action="">
                            <div id="orderDetail">
                                <div id="tableForm">
                                    <input type="hidden" name="id"/>
                                    <div class="blockout">
                                        <div class="blocks">
                                            <label>箱序号</label>
                                            <div class="layui-input-inline">
                                                <input type="text" disabled class="layui-input" name="xxh" id="boxNumber" placeholder="箱序号"/>
                                            </div>
                                        </div>
                                        <div class="blocks">
                                            <label>箱编号</label>
                                            <div class="layui-input-inline">
                                                <input type="text" disabled class="layui-input" name="xbh" id="boxCode" placeholder="箱编号"/>
                                            </div>
                                        </div>
                                        <div class="blocks">
                                            <label>箱型</label>
                                            <div class="layui-input-inline">
                                                <input type="text" disabled class="layui-input" name="xx" id="boxType" placeholder="箱型"/>
                                            </div>
                                        </div>
                                        <div class="blocks">
                                            <label>重量</label>
                                            <div class="layui-input-inline">
                                                <input type="text" disabled class="layui-input" name="zzl" id="weight" placeholder="重量"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="blockout">
                                        <div class="blocks">
                                            <label>整散标记</label>
                                            <div class="layui-input-inline">
                                                <input type="text" disabled class="layui-input" name="zslx" id="fullbulk" placeholder="整散标记"/>
                                            </div>
                                        </div>
                                        <div class="blocks">
                                            <label>物流单号</label>
                                            <div class="layui-input-inline">
                                                <input type="text" class="layui-input" name="ysdh" id="suttleOdd" placeholder="物流单号"/>
                                            </div>
                                        </div>
                                        <div class="blocks">
                                            <label>运费</label>
                                            <div class="layui-input-inline">
                                                <input type="text" class="layui-input" name="yf" id="freight" placeholder="运费"/>
                                            </div>
                                        </div>
                                        <div class="blocks">
                                            <label>物流公司</label>
                                            <div class="layui-input-inline">
                                                <input type="text" class="layui-input" name="ysgs" id="suttleCompany " placeholder="物流公司"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="blockout">
                                        <div class="blocks">
                                            <div class="layui-input-inline" style="margin-top: 2rem;">
                                                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="add">保存</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </section>
            </div>
        </div>
    </div>

</div>
</body>
<div th:include="public/public_js::public_js"></div>
<script th:src="@{plugin/beyond/assets/js/fuelux/wizard/wizard-custom.js}"></script>
<script>
    layui.use(['myform','zzpUtils','form','laydate','jquery','zzpValidation'],function () {
        var form = layui.form,
            zzpUtils = layui.zzpUtils
            ,laydate = layui.laydate
            ,zzpValidation = layui.zzpValidation
            ,$ = layui.jquery;


        // 行内按钮
        window.operateEvent ={
            "click #edit":function (e, value, row, index) {
                layer.open({
                    title: false,
                    type: 1,
                    content: $('#forms'),
                    area: ['90%', '90%']
                })
                if (row) {
                    zzpUtils.loadJsonDataToForm(row);
                }

            },
            "click #look":function (e, value, row, index) {
                layer.open({
                    title: false,
                    type:2,
                    content: "/zxsdwms/outOperation/PackingDetailRow?id=" + row.ssfydid + "&xbh=" + row.xbh,
                    area: ['90%', '90%']
                })
            },
            "click #print":function (e, value, row, index) {
                var ids = [];
                ids.push(row.id);
                $.ajax({
                    url: '/zxsdwms/wmsreview/zxPrintByXids',
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json',
                    data: JSON.stringify({ids: ids}),
                    success: function (data) {
                        if(data.type === 'success') {
                            var contentList = data.data;
                            if (contentList.length !== 0) {
                                for (let item of contentList) {
                                    console.log('itme', item);
                                    // 先调用方法
                                    let LODOP = GetLodop()
                                    // 打印名称
                                    LODOP.PRINT_INIT('打印快递面单')
                                    /* NewPage意思新的一页 如果多个数据放到for里面必须写 */
                                    LODOP.NewPage()
                                    // ADD_PRINT_URL 设置参数 item 最后的item是你打印的地址
                                    LODOP.ADD_PRINT_URL(0, 0, 746, '100%', item)
                                    LODOP.SET_PRINT_STYLEA(0, 'HOrient', 3)
                                    LODOP.SET_PRINT_STYLEA(0, 'VOrient', 3)
                                    LODOP.PREVIEW()
                                }
                            }
                        } else {
                            layer.msg(data.title);
                        }
                    }
                })
            },
        }

        function operateFormatter(value, row, index) {console.log(row);
            var prints = '';
            if (row.zslx === '整箱') {
                prints = '<a class="layui-btn layui-btn-xs layui-btn-disabled" id="print" style="text-decoration: none;">打印</a>';
            } else {
                prints = '<a class="layui-btn layui-btn-xs layui-btn-normal" id="print" style="text-decoration: none;">打印</a>';
            }
            var returns = [
                '<a class="layui-btn layui-btn-xs layui-btn-normal" id="edit" style="text-decoration: none;">编辑</a>',
                '<a class="layui-btn layui-btn-xs layui-btn-normal"  id="look" style="text-decoration: none;">查看</a>',
            ];
            returns.push(prints);
            return returns.join('')
        }
        // 主页面table
        var $table = zzpUtils.table({
            elem: '#table',
            isApi: true,
            pagination: true,//分页开关
            checkboxHeader: false,
            showColumns: false,// 列选择
            url: '/wmsbox/selectZxmx',
            columns: [
                {field:'xxh',title:'箱序号'},
                {field:'xbh',title:'箱编号'},
                {field:'xx',title:'箱型'},
                {field:'zzl',title:'重量'},
                {field:'zslx',title:'整散标记'},
                {field:'ysdh',title:'物流单号'},
                {field:'yf',title:'运费'},
                {field:'ysgs',title:'物流公司'},
                {
                    field:'caozuo',
                    title: '操作',
                    events:operateEvent,
                    formatter:operateFormatter
                }
            ],
            queryParams: function () {//查询条件
                return  {
                    ssfydid: localStorage['id'],
                    page: 1,
                    rows: 10
                };
            },

        });

        form.on("submit(add)",function(data) {
            var field = data.field;
            $.ajax({
                url: '/zxsdwms/wmsbox/fillInExpressSingleNumber',
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json',
                data: JSON.stringify(field),
                success: function (data) {
                    layer.msg(data.title);
                    if (data.type === 'success') {
                        $('#table').bootstrapTable('refresh');
                    }
                },
                error: function (err) {
                    console.log(err);
                }
            })
            return false;
        })

    })

</script>
</html>